<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <template>
        <div v-if="true">
          <el-input
            v-model="query.methodname"
            clearable
            size="small"
            placeholder="请输入你要搜索的方法"
            style="width: 200px;"
            class="filter-item"
          />
          <date-range-picker v-model="query.createDate" class="date-item" />
          <rrOperation />
        </div>
      </template>
      <!--      <crudOperation :permission="permission" />-->
      <!--表单组件-->
      <el-dialog :visible.sync="view" title="日志详情" width="800px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item label="类名">
            <el-input readonly v-model="form.clazzname"></el-input>
          </el-form-item>
          <el-form-item label="方法名">
            <el-input readonly v-model="form.methodname"></el-input>
          </el-form-item>
          <el-form-item label="请求参数">
            <el-input type="textarea" readonly v-model="form.paramter"></el-input>
          </el-form-item>
          <el-form-item label="返回参数">
            <el-input type="textarea" readonly v-model="form.returns"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;"
                @selection-change="crud.selectionChangeHandler">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="clazzname" label="请求类名"/>
        <el-table-column prop="methodname" label="请求方法"/>
        <!--        <el-table-column prop="paramter" label="请求参数" />-->
        <!--        <el-table-column prop="returns" label="返回参数" />-->
        <el-table-column prop="elapsedtime" label="耗时"/>
        <el-table-column prop="createDate" label="请求时间"/>
        <el-table-column prop="type" label="类型">
          <template slot-scope="scope">
            {{ scope.row.type == 1 ? "中控":"追溯" }}
          </template>
        </el-table-column>
        <!--        <el-table-column prop="errorname" label="异常类名" />-->
        <!--        <el-table-column prop="errormsg" label="异常信息" />-->
        <el-table-column v-if="checkPer(['admin','sysLogs:edit','sysLogs:del'])" label="操作" width="150px"
                         align="center">
          <template slot-scope="scope">
            <el-button @click="isView(scope.row.id)">查看日志</el-button>
            <!--            <udOperation-->
            <!--              :data="scope.row"-->
            <!--              :permission="permission"-->
            <!--            />-->
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination/>
    </div>
  </div>
</template>

<script>
import crudSysLogs from '@/api/monitor/sysLogs'
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import DateRangePicker from '@/components/DateRangePicker'

const defaultForm = {
  id: null,
  clazzname: null,
  methodname: null,
  paramter: null,
  returns: null,
  elapsedtime: null,
  createDate: null,
  type: null,
  errorname: null,
  errormsg: null
}
export default {
  name: 'SysLogs',
  components: {DateRangePicker, pagination, crudOperation, rrOperation, udOperation},
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({title: '接口日志', url: 'api/sysLogs', idField: 'id', sort: 'id,desc', crudMethod: {...crudSysLogs}})
  },
  data() {
    return {
      view: false,
      permission: {
        add: ['admin', 'sysLogs:add'],
        edit: ['admin', 'sysLogs:edit'],
        del: ['admin', 'sysLogs:del']
      },
      rules: {}
    }
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    isView(id) {
      this.view = true
      crudSysLogs.one({id: id}).then(res => {
        this.form = res
      })
    }
  }
}
</script>

<style scoped>
</style>
